<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/font-awesome/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/Ionicons/css/ionicons.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/AdminLTE.min.css}">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/skins/skin-blue.min.css}">

    <link rel="stylesheet" th:href="@{/bootstrap-table/bootstrap-table.css}">

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <title>标椎地名地址管理系统</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <div th:replace="common/header :: header"></div>

    <div th:replace="common/menu :: menu"></div>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" >
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Page Header
                <small>Optional description</small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <a href="#">
                        <i class="fa fa-dashboard"></i>系统设置
                    </a>
                </li>
                <li class="active">申请补发列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content container-fluid">
            <!--<div class="row">-->
                <!--<div class="box box-info">-->
                    <!--<table id="dataTable" class="table table-hover table-responsive" style="table-layout: fixed"></table>-->
                <!--</div>-->
            <!--</div>-->

            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-body">
                            <div id="toolbar">
                                <div class="form-inline" role="form">
                                    <div class="form-group">
                                        <label for="keyword">用户名: </label>
                                        <input name="keyword" class="form-control" type="text" id="keyword">
                                    </div>
                                    <button id="searchBtn" type="submit" class="btn btn-primary" style="margin-left: 5px">
                                        查询
                                    </button>
                                    <!--<a href="/User/toadd">-->
                                        <!--<button id="createBtn" type="submit" class="btn btn-info" style="margin-left: 30px">-->
                                            <!--录入-->
                                        <!--</button>-->
                                    <!--</a>-->
                                    <input type="hidden" th:value="${ifAdmin}" id="ifAdmin" />
                                    <button id="updateBtn" type="submit" class="btn btn-danger">更新状态</button>
                                </div>
                            </div>
                            <table id="dataTable" class="table-striped"
                                   style="table-layout: fixed">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
        <!-- /.content -->

    <!-- /.content-wrapper -->





</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>

<script th:src="@{/adminlte/bower_components/fastclick/lib/fastclick.js}"></script>

<!-- AdminLTE App -->
<script th:src="@{/adminlte/dist/js/adminlte.min.js}"></script>

<script th:src="@{/adminlte/dist/js/demo.js}"></script>

<!--<script th:src="@{/js/jquery-3.4.1.min.js}"></script>-->

<script th:src="@{/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>

<script th:src="@{/adminlte/bower_components/layer-v3.1.1/layer/layer.js}"></script>

<script>

    $(function(){
        $("input[class='form-control search-input']").hide();
        var ifAdmin = $("#ifAdmin").val();
        if(ifAdmin=='0'){
            $("#updateBtn").hide();
        }
    });

    $('#dataTable').bootstrapTable({
        method: 'get',
        url: "/ApplyAgain/api/search",

        dataField: "applyAgains",
        pageNumber: 1,
        pagination: true,
        queryParamsType: 'limit',
        queryParams: queryParams,
        sidePagination: 'server',
        pageSize: 10,
        pageList: [10, 20, 50, 100],
        search: true,
        showRefresh: true,
        clickToSelect: true,
        toolbarAlign: 'left',
        buttonsAlign: 'right',

        toolbar: '#toolbar',
        showColumns: true,
        columns: [
            {
                title: '全选',
                field: 'select',
                checkbox: true,
                width: 25,
                align: 'center',
            },
            {
                title: 'ID',
                field: 'againId',
                visible: true,
                width: 160
            },
            {
                title: '用户ID',
                field: 'userId',
                width: 80,
                align: 'center'
            },
            {
                title: '用户名',
                field: 'userName',
                width: 80,
                align: 'center'
            },

            {
                title: '申请缘由',
                field: 'content',
                width: 200,
                align: 'center'
            },
            {
                title: '申请状态',
                field: 'state',
                width: 120,
                align: 'center',
                formatter: function (value, row, index) {
                    if(value==1){return '待审';}
                    if(value==2){return '在办';}
                    if(value==3){return '完成';}
                    if(value==4){return '拒绝';}
                }
            },
            {
                title: '申请日期',
                field: 'createDate',
                width: 150,
                align: 'center',
                formatter: function (value, row, index) {
                    return changeDateFormat(value)
                }
            },
            {
                title: '更新日期',
                field: 'updateDate',
                width: 150,
                align: 'center',
                formatter: function (value, row, index) {
                    return changeDateFormat(value)
                }
            }

        ],
        locale: 'zh-CN',
        responseHandler: function (data) {
            console.log("response data : "+data);
            return data;
        }
    });

    function changeDateFormat(cellval) {
//        var dateVal = cellval + "";
        //2019-08-04T06:15:20.000+0000
        if (cellval != null) {
            var date = new Date(cellval);
            console.log("before format :"+date);
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

            return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
        }
    }

    function queryParams(params) {
        console.log("params..."+params);
        return {
            pageSize: params.limit,
            pageNum: params.offset / params.limit + 1,
            keyword: $('#keyword').val()
        }
    }
    $("#updateBtn").click(function () {
        var selects = $('#dataTable').bootstrapTable('getSelections');
        var str = JSON.stringify(selects);
        console.log(selects+"---str :"+str);
        layer.confirm("确定修改吗",{icon: 3,title: "提示"}, function(index) {
            for (var i = 0; i < selects.length; i++) {
                if(selects[i].state==3||selects[i].state==4){
                    console.log("当前申请不能修改状态 ："+selects[i].againId);
                    layer.msg("当前申请不能修改状态 ", {
                        icon: 3,
                        time: 3000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        return false;
                    });
                }else{
                    $.ajax({
                        url: "/ApplyAgain/add?againId=" + selects[i].againId+"&state="+selects[i].state,
                        method: "post",
                        success: function (dataR) {
                            var result;
                            if(typeof dataR=='object'){
                                result=dataR;
                            }else{
                                result=JSON.parse(dataR);
                            }
                            if(result.code=="0000"){
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 3000 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    location.reload();
                                });
                            }else{
                                layer.msg("提交失败！");
                            }
                        },
                        fail: function (data) {
                            console.log(data);
                        }
                    })
                }
            }
        });
    });

    $("#searchBtn").click(function () {
        var input = $('#keyword').val()
        $('#dataTable').bootstrapTable('refresh', {
            url: "/ApplyAgain/api/searchLike?keywords=" + input
        });
    });

</script>
</body>
</html>